<template>
	<view class="auditDetails">
		<view class="header">
			<view class="tabs" v-if="checked==false">
				<view class="tab" v-for="(item,index) in tabs.list" :key="index" :class="{active:tabs.index==item.id}" @click="clickTab(item,index)">
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick" :top="top+45+'px'" bottom="51px">
			<good-list :list="goods" @clickRow="clickRow" class="goodlist"></good-list>
		</mescroll-uni>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let that
	import goodList from "./goodList.vue";
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		props: {
			top: [Number, String],
		},
		computed: {
			...mapGetters(['userInfo', 'api']),
		},
		components: {
			goodList
		},
		data() {
			return {
				checked:false,
				tabs: {
					index: '',
					list: []
				},
				goods: [] ,//列表数据
				downOption: {
					auto: false ,// 不自动加载 (mixin已处理第一个tab触发downCallback)
					textOutOffset:this.$t('mescroll.shifanggenxin'),
					textInOffset:this.$t('mescroll.xialashuaxin'),
					textLoading:this.$t('mescroll.jiazaizhong'),
					textSuccess:this.$t('mescroll.jiazaichenggong'),
					textErr:this.$t('mescroll.jiazaishibai'),
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无记录 ~',
						fixed:true,
						top: "200rpx",
					},
					textNoMore:this.$t('mescroll.chudile')
				},
				calendar:{
					date:''
				}
			}
		},
		mounted(option) {
			that = this
			//获取栏目
			this.getChannel()
		},
		methods: {
			clickRow(){
				this.$emit("clickRow",true)
			},
			//获取栏目
			getChannel(){
				uni.$u.http.get(this.api.api_v1_article_channel, {}).then(res => {
					if(res.code==200&&res.data){
						this.tabs.list=res.data
						this.tabs.index = res.data[0].id
						//获取列表
						this.downCallback()
					}
				})
			},
			clickTab(item,i){
				this.tabs.index=item.id
				this.downCallback()
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.goods = []
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.getList(page)
			},
			getList(page) {
				let req = {
					params: {
						page: page.num, // 当前显示第几页
						channelId: this.tabs.index,
					}
				}
				console.log(req);
				uni.$u.http.get(this.api.api_v1_article_lists, req).then(res => {
					if(page.num==1){
						this.goods = [];
					}
					if(res.code==200&&res.data&&res.data.data){
						this.mescroll.endSuccess(res.data.data.length,res.data.next_page_url?true:false);
						this.goods=this.goods.concat(res.data.data)
					}else{
						this.mescroll.endBySize(0,0);
						this.goods=[]
					}
				}).catch(err => {
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick() {
				
			},
		}
	}
</script>

<style lang="scss">
	.auditDetails {
		max-width: 790px;margin: auto;
		.goodlist{
			max-width: 790px;margin: auto;
		}
		.header{
			display: flex;justify-content: space-between;width: 100%;align-items: center;
			.tabs{
				display: flex;padding: 10px;justify-content: space-around;flex: 1;
				.tab{
					padding: 5px 10px;border-radius: 5px;background-color: #3c3c3c;color: #9ea7b9;font-size: 12px;
					.tabIndex{
						display: flex;align-items: center;
						.image{
							width: 16px;height: 16px;
						}
					}
				}
				.active{
					background-color: #ffaf01;color: #fff;
				}
			}
			.richeng{
				display: flex;align-items: center;padding:12px;color: #fff;
				.image{
					width: 20px;height: 20px;margin-right: 5px;
				}
			}
			.right{
				width: 200rpx;display: flex;justify-content: space-around;align-items: center;
			}
		}
		
	}
</style>